<template>
    <div id="app">
        <body id="poster">
        <el-form :model="loginForm" class="login-container" status-icon label-position="left" label-width="0px" ref="ruleForm" :rules="rules" style="margin-top: 15px">
            <h3 class="login_title">请修改您的信息</h3>
            <el-form-item>
                <el-upload
                        v-model="loginForm.userImg"
                        title="更改头像"
                        style="margin: -35px 0 -20px 75px"
                        class="avatar-uploader"
                        action="http://localhost:8001/disney/oss/uploadFile"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :on-remove="handleRemove"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <span v-if="imageUrl" class="el-upload-action" @click.stop="handleRemove()">
                    <i class="el-icon-delete"></i>
                </span>
                    <i v-else class="el-icon-upload2 avatar-uploader-icon" stop></i>
                </el-upload>
            </el-form-item>
            <el-form-item  prop="userName">
                <el-input type="text" v-model="loginForm.userName" auto-complete="off" placeholder="请设置用户名" name="userName" id="userName"></el-input>
            </el-form-item>
            <el-form-item prop="userPwd">
                <el-input type="password" v-model="loginForm.userPwd" autocomplete="off" placeholder="请设置密码" name="userPwd" id="userPwd"></el-input>
            </el-form-item>
            <el-form-item prop="ac">
                <el-input type="password" v-model="loginForm.ac" autocomplete="off"  placeholder="请确认修改密码" name="ac" id="ac"></el-input>
            </el-form-item>
            <el-form-item prop="birthday">
            <el-date-picker
                    v-model="loginForm.birthday"
                    type="date"
                    placeholder="选择生日"
                    prop="birthday"
                    name="birthday"
            >
            </el-date-picker>
            </el-form-item>
            <el-form-item   prop="userPhone">
                <el-input type="text" v-model="loginForm.userPhone" auto-complete="off" placeholder="请输入手机号" name="userPhone" id="userPhone"></el-input>
            </el-form-item>
            <el-form-item   prop="userArea">
                <el-input type="text" v-model="loginForm.userArea" auto-complete="off" placeholder="请输入地址" name="userArea" id="userArea"></el-input>
            </el-form-item>
            <el-form-item >
                <el-radio-group v-model="loginForm.gender">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item style="width: 100%">
                <el-button type="primary" style="width: 45%;background: #505458;border: none" @click="submitForm('ruleForm')">
                    确认修改
                </el-button>
                <el-button type="primary" style="width: 45%;background: #505458;border: none;text-align: center"  @click="tui">取消</el-button>
            </el-form-item>
        </el-form>
        </body>
    </div>
</template>

<script>
    import denglu from '../api/denglu'

    export default {
        name: "zhuce",
        created(){
            this.xiugaixianshi()
        },
        data() {
            var checkPhone = (rule, value, callback) => {
                const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/
                if (!value) {
                    return callback(new Error('电话号码不能为空'))
                }
                setTimeout(() => {

                    if (!Number.isInteger(+value)) {
                        callback(new Error('请输入数字值'))
                    } else {
                        if (phoneReg.test(value)) {
                            callback()
                        } else {
                            callback(new Error('号码格式错误,首位为1，次位为3-8组成的11位数字'))
                        }
                    }
                }, 100)
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.loginForm.userPwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                imageUrl: 'https://touxiang-1.oss-cn-shanghai.aliyuncs.com/2021-07/17/3991463_204828364355_2.jpg',
                loginForm: {
                    userImg:"https://touxiang-1.oss-cn-shanghai.aliyuncs.com/2021-07/17/3991463_204828364355_2.jpg",
                    userName: '',
                    userPwd: '',
                    gender: '',
                    birthday: '',
                    userPhone: '',
                    userArea: '',
                    ac:"",
                },
                responseResult: [],
                isChecked: true,
                rules: {
                    userName: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    userPwd: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 3, max: 4, message: '长度在 3 到 11 个字符', trigger: 'blur'}
                    ],
                    birthday: [
                        { required: true, message: '请选择生日', trigger: 'change'},
                    ],
                    userPhone: [
                        { required: true, validator: checkPhone, trigger: 'blur' }
                    ],
                    userArea: [
                        {required: true, message: '请输入地址', trigger: 'blur'},
                        {min: 3, max: 100, message: '长度为3位以上字符', trigger: 'blur'}
                    ],
                    ac: [
                        { required: true, validator: validatePass2, trigger: 'blur' }
                    ]

                },

            }
        },
        methods: {
         tui() {
                        this.$router.replace('/')
                    },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        denglu.xiugaia(this.loginForm,JSON.parse(localStorage.getItem("Authorization")).userId).then(
                            response => {
                                alert(response.data.msg)
                                this.$router.replace('/');
                            }
                        )
                    } else {
                        alert('请完善或者修改错误信息');
                        return false;
                    }
                });
            },
            xiugaixianshi() {
                denglu.xiuaixian(JSON.parse(localStorage.getItem("Authorization")).userId).then(
                    response => {
                        this.loginForm.userName=response.data.data.byId.userName
                        this.loginForm.userPwd=response.data.data.byId.userPwd
                        this.loginForm.gender=response.data.data.byId.gender
                        this.loginForm.birthday=response.data.data.byId.birthday
                        this.loginForm.userPhone=response.data.data.byId.userPhone
                        this.loginForm.userArea=response.data.data.byId.userArea
                        this.loginForm.ac=response.data.data.byId.userPwd
                    }
                )
            },
            handleRemove() {
                this.imageUrl = ''
            },
            // 上传成功回调
            handleAvatarSuccess(res) {
                this.imageUrl = res.data.url
                this.loginForm.userImg=res.data.url
            },
            // 上传前格式和图片大小限制
            beforeAvatarUpload(file) {
                const type = file.type === 'image/jpeg' || 'image/jpg' || 'image/webp' || 'image/png'
                const isLt2M = file.size / 1024 / 1024 < 2
                if (!type) {
                    this.$message.error('图片格式不正确!(只能包含jpg，png，webp，JPEG)')
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!')
                }
                return type && isLt2M
            },

            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },

            },

        }
    }
</script>

<style scoped>
    #poster {
        background:url("../assets/backgroud/bk3.jpg") no-repeat;
        background-position: center;
        height: 100%;
        width: 100%;
        background-size: cover;
        position: fixed;
    }
    body{
        margin: 0;
        padding: 0;
    }

    .login-container {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 90px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    .login_title {
        margin: 0 auto 40px auto;
        text-align: center;
        color: #505458;
    }
    .avatar-uploader{
        width: 120PX;
        height: 120px;
        border-radius: 50%;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        background-size: 100% 100%;
    }
    .avatar-uploader-icon{
        font-size: 0;
        color: #fff;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
    .avatar-uploader-icon:hover{
        font-size: 28px;
        background-color: rgba(0, 0, 0, .3);
    }
    .avatar {
        position: relative;
        width: 120px;
        height: 120px;
        display: block;
    }
    .el-upload-action {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        font-size: 0;
        color: #fff;
        text-align: center;
        line-height: 120px;

    }
    .el-upload-action:hover {
        font-size: 20px;
        background-color: #000;
        background-color: rgba(0, 0, 0, .3)
    }
</style>